<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单明细</title>
    <link rel="icon" href="http://wb.boqibao.com/favicon2.ico">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" type="text/css" href="css/home.css"/>
    <script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
    <script src="js/bootstrap.min.js" charset="UTF-8"></script>
    <script src="js/swiper.min.js" charset="UTF-8"></script>
    <script src="js/global.js" charset="UTF-8"></script>
    <script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
    <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>

    <!-- 引入Element-UI样式 -->
    <link rel="stylesheet" href="plugins/element/index.css">
    <link rel="stylesheet" href="plugins/element/icon.css"/>
    <!--引入vue和Axios.js 先导入vue  再导入axios -->
    <script src="plugins/vue/dist/vue.js"></script>
    <script src="plugins/axios/dist/axios.js"></script>
    <script src="script/main.js"></script>

    <!-- 引入Element-UI组件库 -->
    <script src="plugins/element/index.js"></script>

</head>
<body>
<div id="order">

    <div class="egc-top">
        <div class="nav-cent">
            <div class="top-r">
                <span>
                     <a href="" class="top-l" id="myBtn1" @click="recharge">充值联系方式</a>|
                </span>
                <span>
<!--                    <a href="#" id="b-login" class="b-login">登陆</a>-->
                </span>
                <span id="loginAfter" style="display: none;">
                    欢迎您：{{username}}！ |
                    <a href="#" id="b-logout" @click="loginOut">登出</a>
                    <!--                    <a href="/user_client/orderInfo.html">购物车<span id="carCountSpan" class="number"-->
                    <!--                                                            style="margin-left: 10px;">({{carCount}})</span></a>-->
                </span>
            </div>
            <!--            <div class="top-l">全国统一客服热线：XXX</div>-->
            <div class="clear_fix"></div>
        </div>
    </div>

    <!-- 顶部标题 -->
    <div class="bgf5 clearfix">
        <div class="top-user">
            <div class="inner">
                <a class="logo" href="index.html"><img src="images/logo.png.jpg" style="width: 145px; height: 98px"
                                                       alt="首页" class="cover"></a>
                <div class="title">订单明细</div>
            </div>
        </div>
    </div>
    <div class="content clearfix bgf5">
        <section class="user-center inner clearfix">
            <div class="pull-left bgf">
                <a href="#" class="title">欢迎您</a>
                <dl class="user-center__nav">
                    <dt>帐户信息</dt>
                    <a href="#"><dd>基础信息：</dd></a>
                    <a href="#"><dd>用户名：{{this.user.username}}</dd></a>
                    <a href="#"><dd>邮箱：{{this.user.email}}</dd></a>
                    <a href="#"><dd>电话：{{this.user.phone}}</dd></a>
                    <a href="#"><dd>是否可用：{{this.user.disable}}</dd></a>
                    <a href="#"><dd>余额：{{this.user.balance}}</dd></a>
                </dl>
                <dl class="user-center__nav">
                    <dt>订单中心</dt>
                    <a href="order.html"><dd>我的订单</dd></a>
                    <a href="bill.html"><dd>订单明细</dd></a>
                    <a href="goods.html"><dd>商品列表</dd></a>
                    <a href="http://47.242.159.222:8082/app/download"><dd>下载App</dd></a>
                    <a href="index.html"><dd>首页</dd></a>
                </dl>
            </div>

            <div class="d-flex justify-content-start">
                <div class="user-content__box clearfix bgf">
                    <div class="title">订单中心-订单明细</div>
                    <div class="order-list__box bgf">
                        <div class="order-panel">
                            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                                <el-form :inline="true" :model="query">
                                    <el-date-picker
                                            v-model="query.time"
                                            type="date"
                                            style="width: 130px; height: 50px;float: left;margin-right: 10px;"
                                            format="yyyy-MM-dd"
                                            value-format="yyyy-MM-dd"
                                            @change="getBill"
                                            placeholder="选择日期">
                                    </el-date-picker>

                                    <el-select v-model="query.type" clearable placeholder="消费类型 "@change="searchBill"  style="width: 120px; height: 50px;float: left;margin-right: 10px;">
                                        <el-option
                                                v-for="item in types"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                            {{ item.label }}
                                        </el-option>
                                    </el-select>

                                    <el-form-item>
                                        <el-input v-model="query.url" placeholder="请输入链接"  clearable  style="width: 200px; height: 50px;float: left;"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-input v-model="query.oid" placeholder="请输入订单号"  clearable  style="width: 200px; height: 50px;float: left;"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" v-on:click="searchBill"  style="width: 100px; height: 40px;float: left;margin-right: 5px;">查询</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                            <div class="tab-content">
                                <ul class="orderList">
                                    <el-table :data="pageInfo.rows" style="width: 100%" border :key="">
                                        <el-table-column prop="time" label="消费时间" fixed width="110">
                                        </el-table-column>
                                        <el-table-column prop="money" label="消费金额" fixed width="100">
                                        </el-table-column>
                                        <el-table-column prop="type" label="消费类型" fixed width="150">
                                            <template slot-scope="scope">
                                                <span v-if="scope.row.type == 1">充值</span>
                                                <span v-if="scope.row.type == 2">消费</span>
                                                <span v-if="scope.row.type == 21">消费--关注</span>
                                                <span v-if="scope.row.type == 22">消费--转发</span>
                                                <span v-if="scope.row.type == 23">消费--评论</span>
                                                <span v-if="scope.row.type == 24">消费--点赞</span>
                                                <span v-if="scope.row.type == 25">消费--阅读</span>
                                                <span v-if="scope.row.type == 26">消费--视频播放</span>
                                                <span v-if="scope.row.type == 27">消费--真人转评赞</span>
                                                <span v-if="scope.row.type == 28">消费--统一转评赞</span>
                                                <span v-if="scope.row.type == 29">消费--评中评</span>
                                                <span v-if="scope.row.type == 30">消费--评论赞</span>
                                                <span v-if="scope.row.type == 3">退款</span>

                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="balance" label="消费后余额"  width="150" fixed>
                                        </el-table-column>
                                        <el-table-column prop="oid" label="订单号"  width="210" fixed>
                                        </el-table-column>
                                        <el-table-column prop="url" label="下单链接"  width="205" fixed>
                                        </el-table-column>
<!--                                        <el-table-column label="操作" min-width="100" fixed="right">-->
<!--                                            <template scope="scope">-->
<!--                                                <el-button type="primary" size="small" v-if="scope.row.oType==1"-->
<!--                                                           @click="refund(scope.row)">退款-->
<!--                                                </el-button>-->
<!--                                            </template>-->
<!--                                        </el-table-column>-->
                                    </el-table>
                                </ul>

                                <div class="block">
                                    <el-pagination
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            :current-page="query.currentPage"
                                            :page-sizes="[10, 20, 30, 50]"
                                            :page-size="query.pageSize"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="pageInfo.total" style="float:right;">
                                    </el-pagination>
                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </div>
    <div class="copyright">
        <div class="cent"></div>
    </div>
</div>

</div>

<script type="text/javascript">
    new Vue({
        el: "#order",
        data: {
            RegisterDTO: {
                username: "",
                password: "",
                confirmPassword: "",
                phone: "",
                email: "",
                // imageCode: "",
                // smsCode: "" // 手机验证码
            },

            //用户名登录data
            loginDto: {
                username: '',
                password: ''
            },

            //用来登录后展示用户名
            username: "",
            showButton: false,
            user: {
                id: '',
                username: '',
                email: '',
                phone: '',
                headImg: ''
            },
            pageInfo: {
                rows: [],
                total: 0
            },
            query: {
                currentPage: 1,
                pageSize: 20,
                keyword: "",
                time:'',
                userid:'',
                type:'',
                oid:'',
                url:''

            },
            searchByUrlDto:{
                uid:"",
                url:"",
            },
            types: [{
                value: '1',
                label: '充值'
            }, {
                value: '2',
                label: '消费'
            }, {
                value: '3',
                label: '退款'
            }],
        },

        methods: {


            //获取订单信息
            getBill() {
                var logininfoId = localStorage.getItem("loginUser");
                logininfoId = JSON.parse(logininfoId);
                this.query.userid = logininfoId.id;
                // 通过axios调用后端分页接口
                this.$http.post("/bill", this.query)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            // 要展示table的数据,渲染分页条
                            this.pageInfo = result.resultObj;
                            console.log("========")
                            console.log(this.pageInfo.rows)
                        }
                    })
            },
            searchBill() {
                this.query.currentPage = 1;
                this.getBill()
            },

            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getBill()
            },

            handleCurrentChange(val) {
                this.query.currentPage = val;
                this.getBill()
            },
            recharge(){
                alert("请联系QQ:3688032004;QQ:2717196271")
            },


            //用户登出
            loginOut() {
                this.$http.post("/user/logout")
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            alert("登出成功");
                            localStorage.removeItem("token");
                            localStorage.removeItem("loginUser");
                            //展示登路按钮
                            $("#loginBefore").show();
                            $("#loginAfter").hide();
                            location.href = "/index.html";
                        }
                    }).catch(result => {

                })
            },

            //用户登录
            loginIn() {
                //参数非空校验
                if (!this.loginDto.username) {
                    alert("用户民不能为空");
                    return;
                }
                if (!this.loginDto.password) {
                    alert("密码不能为空");
                    return;
                }
                this.$http.post("/user/login", this.loginDto)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            alert("登录成功，欢迎使用");
                            //将信息存到localStorage
                            localStorage.setItem("token", result.resultObj.token);
                            localStorage.setItem("loginUser", JSON.stringify(result.resultObj.loginUser));
                            //登录后需要展示用户的用户名
                            this.username = result.resultObj.loginUser.username;
                            //展示登出按钮
                            $("#loginBefore").hide();
                            $("#loginAfter").show();
                            //关闭弹框
                            $("#popBox").fadeOut();
                        } else {

                        }
                    }).catch(result => {

                })
            },

            //创建uuid随机字符串
            createUuid() {
                var s = [];
                var hexDigits = "0123456789abcdefghi";
                for (var i = 0; i < 36; i++) {
                    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
                }
                s[14] = "4";
                s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
                s[8] = s[13] = s[18] = s[23] = "-";

                var uuid = s.join("");
                return uuid;
            },

            // 获取当前用户的信息
            getUserInfo() {
                var logininfoId = localStorage.getItem("loginUser");
                logininfoId = JSON.parse(logininfoId);
                this.$http.get("/user/" + logininfoId.id)
                    .then(result => {
                        result = result.data;
                        if (result.success) {
                            // console.log("输出的用户信息")
                            // console.log(result.resultObj)

                            this.user = result.resultObj
                            // console.log("111111111111")
                            // console.log(this.user)
                            // console.log("============")
                        } else {

                        }
                    }).catch(result => {

                })
            },


        },

        mounted() {

            //如果localStorage已经有值，此时应该是登录状态
            var loginUser = localStorage.getItem("loginUser");
            console.log(loginUser)
            if (loginUser) {
                loginUser = JSON.parse(loginUser);
                this.username = loginUser.username;

                //展示登出按钮
                $("#loginBefore").hide();
                $("#loginAfter").show();
            }
            this.getUserInfo();
            //获取用户信息
            // this.getUserInfo();
            // console.log("---------------------")
            // console.log(this.user.id)
            // console.log("---------------------")

            this.getBill()
        }

    })
</script>
<style>

    .order-panel{
        display: flow-root;
    }
    /* 在小屏幕上设置账户信息和订单中心为块级元素，使其在一行显示 */
    @media (max-width: 767px) {
        .user-center__nav {
            display: block ruby;
        }
        .copyright .cent{
            width: auto;
        }
        .bgf{
            background: #fff;
        }
        .user-center__nav dt{
            background-color:#fff;
        }
        .bgf5{
            background-color: #fff;
        }
        .copyright .cent{
            color: #000;
        }
        .copyright{
            background-color: #fff;
        }
        .egc-top .nav-cent{
            background-color: #fff;
        }
        html{
            overflow-y: hidden;
        }
        .order-panel{
            display: inherit;
        }
    }
</style>
</body>
</html>
